<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>AI 图片生成</title>
    <link rel="stylesheet" href="/static/style.css" />
  </head>
  <body>
    <header>
      <h1>AI 图片生成</h1>
      <nav class="nav">
        <a href="/ark" class="{{ 'active' if (active_nav or '') == 'ark' else '' }}">火山SDK调用</a>
        <a href="/" class="{{ 'active' if (active_nav or '') == 'proxy' else '' }}">中转平台调用</a>
        <a href="/images" class="{{ 'active' if (active_nav or '') == 'images' else '' }}">图片库</a>
        <a href="/files" class="{{ 'active' if (active_nav or '') == 'files' else '' }}">文件</a>
      </nav>
    </header>

    <main>
      <section class="panel">
        <form action="/generate" method="post" class="form">
          <label for="prompt">提示词</label>
          <textarea id="prompt" name="prompt" rows="4" placeholder="例如：A delicate gold chain necklace on a soft fabric..." required>{{ prompt_value or '' }}</textarea>

          <div class="row">
            <label for="provider">引擎</label>
            <select id="provider" name="provider">
              <option value="doubao" {% if provider == 'doubao' %}selected{% endif %}>Doubao (URL)</option>
              <option value="gemini" {% if provider == 'gemini' %}selected{% endif %}>通用（模型可选）</option>
            </select>
            <small style="color:#666">提示：模型选择仅在“通用（模型可选）”引擎下生效</small>
          </div>

          <div class="row">
            <label for="model">模型（仅通用引擎）</label>
            <select id="model" name="model">
              <option value="gemini-2.5-flash-image-preview" {% if (model_value or '') == 'gemini-2.5-flash-image-preview' %}selected{% endif %}>Gemini 2.5 Flash Image</option>
              <option value="qwen-image" {% if (model_value or '') == 'qwen-image' %}selected{% endif %}>千问 · qwen-image</option>
              <option value="imagen-4.0" {% if (model_value or '') == 'imagen-4.0' %}selected{% endif %}>Google 4.0 · imagen-4.0</option>
              <option value="imagen-4.0-ultra-generate-001" {% if (model_value or '') == 'imagen-4.0-ultra-generate-001' %}selected{% endif %}>Google 4.0 Ultra · imagen-4.0-ultra-generate-001</option>
              <option value="doubao-seedream-4-0-250828-ark" {% if (model_value or '') == 'doubao-seedream-4-0-250828-ark' %}selected{% endif %}>Doubao Ark · seedream-4-0-250828</option>
            </select>
          </div>

          <div class="row">
            <label for="temperature">Temperature（0–2，越高越发散）</label>
            <input id="temperature" name="temperature" type="number" min="0" max="2" step="0.1" value="{{ (temperature_value or 0.7) }}" />
          </div>

          <div class="row">
            <label for="ratio">纵横比</label>
            <select id="ratio" name="ratio">
              <option value="16:9" selected>16:9（横图）</option>
              <option value="9:16">9:16（竖图）</option>
              <option value="1:1">1:1（方图）</option>
              <option value="3:4">3:4</option>
              <option value="4:3">4:3</option>
            </select>
          </div>

          <div class="row">
            <label for="resolution">分辨率</label>
            <select id="resolution" name="resolution">
              <option value="1920x1080" selected>1920×1080（标准）</option>
              <option value="2K">2K</option>
            </select>
          </div>

          <div class="row">
            <label><input type="checkbox" name="force_ratio" checked /> 强制使用 纵横比/分辨率 参数（Doubao）</label>
          </div>

          <button type="submit">生成图片</button>
        </form>
        {% if error %}
        <div class="error">{{ error }}</div>
        {% endif %}
      </section>

      {% if images and images|length > 0 %}
      <section class="panel">
        <h2>生成结果</h2>
        <div class="grid">
          {% for url in images %}
          <figure class="card">
            <img src="{{ url }}" alt="生成图片" loading="lazy" />
            <figcaption>{{ url }}</figcaption>
          </figure>
          {% endfor %}
        </div>
      </section>
      {% endif %}
    </main>

    <footer>
      <small>后端: FastAPI · 模版: Jinja2</small>
    </footer>
    <script>
      (function () {
        const provider = document.getElementById('provider');
        const model = document.getElementById('model');
        const resolution = document.getElementById('resolution');
        const ratio = document.getElementById('ratio');

        function syncState() {
          const p = provider.value;
          const isGemini = p === 'gemini';
          model.disabled = !isGemini;
        }

        provider.addEventListener('change', syncState);
        model.addEventListener('change', function () {
          if ((model.value === 'imagen-4.0' || model.value === 'imagen-4.0-ultra-generate-001' || model.value === 'doubao-seedream-4-0-250828-ark') && provider.value !== 'gemini') {
            // 自动切换到通用引擎，避免“前端无法组合”问题
            provider.value = 'gemini';
            syncState();
          }
        });

        // 初始同步
        syncState();
      })();
    </script>
    <div id="lightbox" class="lightbox" aria-hidden="true">
      <button class="lb-close" aria-label="关闭">×</button>
      <img src="" alt="预览图" />
    </div>
    <script src="/static/lightbox.js"></script>
  </body>
  </html>
